<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">
      点击弹出拖拽弹框
    </el-button>
    <div>
      <!-- 全局自定义事件 没起作用 -->
      <el-dialog
        v-model="dialogVisible"
        v-if="dialogVisible"
        title="拖拽弹框"
        width="30%"
        center
       
      >
        <span>我是一个弹框</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible = false"
              >确定</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref } from "vue";
import { ElMessageBox } from "element-plus";

const dialogVisible = ref(false);
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>